<template>
  <!--开始必须新建一个div根目录-->
  <div>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    {{form}}
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
      <title>美多商城-登录</title>
    </head>
    <body>
    <div id="app" v-cloak>
      <div class="login_top clearfix">
        <a href="index.html" class="login_logo"><img src="@static/images/logo02.png"></a>
      </div>
      <div class="login_form_bg">
        <div class="login_form_wrap clearfix">
          <div class="login_banner fl"></div>
          <div class="slogan fl">商品美 · 种类多 · 欢迎光临</div>
          <div class="login_form fr">
            <div class="login_title clearfix">
              <a href="javascript:;" class="cur">账户登录</a>
            </div>
            <div class="form_con">
              <div class="form_input cur">
                <form method="post" class="login">
                  <input type="text" name="username" class="name_input" placeholder="请输入用户" v-model="form.username" @blur="checkusername">
                  <div class="user_error">{{error.username}}</div>
                  <input type="password" name="pwd" class="pass_input" placeholder="请输入密码" v-model="form.password" @blur="checkpassword">
                  <div class="pwd_error">{{error.password}}</div>
                  <div class="more_input clearfix">
                    <input type="checkbox" name="remembered">
                    <label>记住登录</label>
                  </div>
                  <input type="submit" value="登 录" class="input_submit">
                </form>
              </div>
            </div>
            <div class="third_party">
              <a href="javascript:;" class="qq_login">QQ</a>
              <a href="#" class="weixin_login">微信</a>
              <a href="register.html" class="register_btn" @click.prevent="Reg">立即注册</a>
            </div>

          </div>
        </div>
      </div>

      <div class="footer no-mp">
        <div class="foot_link">
          <a href="#">关于我们</a>
          <span>|</span>
          <a href="#">联系我们</a>
          <span>|</span>
          <a href="#">招聘人才</a>
          <span>|</span>
          <a href="#">友情链接</a>
        </div>
        <p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
        <p>电话：010-****888 京ICP备*******8号</p>
      </div>
    </div>
    </body>
    </html>

  </div>
</template>

<script>
import '@static/css/reset.css'
import '@static/css/main.css'
export default {
  name: "Login",
  data() {
    return {
      form:{},
      error:{username:"请输入5-20个字符的用户名",password:'请输入8-12位的密码'}
    }
  },

  methods: {
    //立即注册
    Reg(){
      this.$router.push({"path":'Reg'})
    },
    //用户框
    checkusername(){
      let name = this.form.username
      if (name == undefined){
        this.error.username = '用户名不能为空'
        return false
      }
      let reg = /\w{5,10}$/
      if(!reg.test(name)){
        this.error.username = '格式不正确'
        return false
      }
      this.$axios.post('users/login/',this.form)
      .then(res=>{
        if (res.data.code==10041){
          this.error.username = '用户名不能为空'
          return false
        }
        if (res.data.code == 10042){
          this.error.username = '用户名格式不正确'
          return false
        }
        this.error.username = ''
      })

    },

    checkpassword(){
      let pwd = this.form.password
      if (pwd == undefined){
        this.error.password = '密码不能为空'
        return false
      }
      let preg = /\w{5,20}$/
      if (!preg.test(pwd)){
        this.error.password = '密码格式不正确'
        return false
      }
      this.$axios.post('users/login/',this.form)
      .then(res=>{
        if (res.data.code == 10043){
          this.error.password = "密码不能为空"
          return false
        }
        if (res.data.code ==10044){
          this.error.password = '密码格式不正确'
          return false
        }
        this.error.password = ''
      })
    }
  },

  computed: {},

  mounted() {

  }
}
</script>

<style scoped>

</style>
